<!-- Created by 337547038 表单设计. 中间容器 -->
<template>
  <div class="container">
    <formControl
      :formData="formDataList"
      :searchData="formData"
      :searchDesign="searchDesign">
    </formControl>
    <div class="main-body">
      <headTools @click="headToolClick"></headTools>
      <div class="empty-tips" v-if="formData.list.length===0">
        从左侧拖拽来添加字段
      </div>
      <div class="main-form" v-loading="loading">
        <form-design :form-data="formData" :type="4"/>
      </div>
    </div>
    <form-control-attr
      v-model:formStyle="formData.style"
      :formConfig="formData.config"
      @openDialog="dialogOpen"/>
    <el-drawer
      v-model="visibleDialog"
      size="60%"
      :direction="drawerDirection"
      custom-class="json-dialog"
      :append-to-body="true"
      :before-close="drawerBeforeClose"
      >
      <div v-if="visibleDialog" id="editJson"></div>
      <div class="dialog-footer">
        <el-button
          type="primary"
          size="small"
          @click="dialogConfirm">
          确定
        </el-button>
      </div>
    </el-drawer>
    <vue-File ref="vueFileEl" v-if="!searchDesign"></vue-File>
    <el-dialog v-model="previewVisible" title="预览" :fullscreen="true">
      <form-design :form-data="formDataPreview" :type="1" ref="previewForm" v-if="previewVisible"/>
      <template #footer>
        <div class="dialog-footer">
          <el-button
            size="small"
            type="primary"
            @click="previewSubmit">
            提交
          </el-button>
          <el-button
            size="small"
            @click="previewVisible=false">
            取消
          </el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 模版确认 -->
    <el-dialog
      v-model="TemplateConfirm"
      title="模版"
      width="30%"
      :before-close="handleClose"
    >
      <el-button type="">模版一</el-button>
    </el-dialog>
  </div>
</template>
<script>
import headTools from './components/headTools.vue'
import formControl from './components/dragControl.vue'
import formDesign from './components/form.vue'
import formControlAttr from './components/formControlAttr.vue'
import {nextTick, onUnmounted, reactive, ref, toRefs} from 'vue'
import {useStore} from '/@/store/index';
import {getDesignFormRow, saveDesignForm} from '/@/api/form/index'
import {ElMessage} from 'element-plus'
import {useRoute} from 'vue-router'
import vueFile from "./components/vueFile.vue"
import {aceEdit} from "./components/comm.js"
import {localStorage, objToStringify, stringToObj} from '/@/utils/form/index'

export default {
    name: 'designIndex',
    props: ["title","data"],
    emits:["supform"],
    components: {headTools, formControl, formDesign, formControlAttr, vueFile},
    setup(props, ctx) {
      const store = useStore()
      const query = useRoute().query
      let TemplateConfirm = ref(false)
      const state = reactive({
        formData: {
          list: [],
          config: {
            labelWidth: '',
            class: '',
            size: 'default',
            name: 'form' + new Date().getTime(),
            rulesComm: []
          }
        },
        visibleDialog: false,
        sourceDialog: '',
        editor: {},
        loading: false,
        drawerDirection: 'rtl', // 默认右边弹出
        formDataPreview: {},
        previewVisible: false, // 预览窗口
        searchDesign: query.type === 'search', // 是否为筛选设计
        formDataList: [], // 筛选模式下提供给左则快速选择已有表单字段
        editCodeType: '' // 编辑代码类型
      })
      const vueFileEl = ref()
      const id = query.id // 当前记录保存的id
      const formName = query.formName // 使用的是哪个表单数据源
      if (id) {
        // 获取初始表单数据
        state.loading = true
        getDesignFormRow(id)
          .then(res => {
            if (res.data.code === 200) {
              if (state.searchDesign) {
                // 筛选设计时取不同的数据
                const sD = res.data.data[0].searchData
                state.formData = sD ? objToStringify(sD) : []
                state.formDataList = objToStringify(res.data.data[0].formData).list
              } else {
                state.formData = objToStringify(res.data.data[0].formData)
              }
            }
            state.loading = false
          })
          .catch(res => {
            console.log(res)
            state.loading = false
          })
      }
      if (!id && !formName) {
        // 没保存到数据库时，从本地取值
        const storage = localStorage()
        if (storage) {
          if (state.searchDesign) {
            if (storage.searchData) {
              state.formData = storage.searchData
            }
            if (storage.formData) {
              state.formDataList = storage.formData.list
            }
          } else {
            if (storage.formData) {
              state.formData = storage.formData
            }
          }
        }
      }
      // 数据表转表单设计
      const conversion = (main,detail)=>{
        console.log(main,'主-子',detail);
        let mainformData = []
        main[0].Fields.forEach((item)=>{
          if(item.dataTypeID===1&&item.componentID>0){
            // 下拉框
            mainformData.push({name:item.fieldName,type: "select",control:{modelValue:[],appendToBody: true},options:[{label: "label1",value: "value1"}],config:{type: "fixed",source: 0,request: "get",sourceFun: "",span: "6"},item:{label:item.fieldDispName,showLabel: false},rules: []})
          }else if(item.dataTypeID===1&&item.componentID===0){
            // 文本框
            mainformData.push({name:item.fieldName,type:'input',control:{modelValue:''},config:{span: "6"},item:{label:item.fieldDispName,showLable:'fasle'},rules:[],customRules:[]})
          }else if(item.dataTypeID===2){
            // 文本框。规则整数
            mainformData.push({name:item.fieldName,type:'input',control:{modelValue:''},config:{span: "6"},item:{label:item.fieldDispName,showLable:'fasle'},rules:[],customRules:[{type: "int",message: "请输入正确的整数",trigger: "blur"}]})
          }else if(item.dataTypeID===3){
            // 文本框。规则小数
            mainformData.push({name:item.fieldName,type:'input',control:{modelValue:''},config:{span: "6"},item:{label:item.fieldDispName,showLable:'fasle'},rules:[],customRules:[{type: "number",message: "请输入数字",trigger: "blur"}]})
          }else if(item.dataTypeID===4){
            // 日期
            mainformData.push({name:item.fieldName,type: "datePicker",control:{modelValue: "",type: "date"},config:{span: "6"},item:{label: item.fieldDispName,showLabel: false},rules: []})
          }else if(item.dataTypeID===5){
            // 照片
            mainformData.push({name:item.fieldName,type: "upload",control: {modelValue: []},config: {btnText: "选择图片",span: "6"},item: {label: "上传图片",showLabel: false},rules: []})
          }else if(item.dataTypeID===10){
            // 文件
            mainformData.push({name:item.fieldName,type: "upload",control: {modelValue: []},config: {btnText: "选择图文件",span: "6"},item: {label: "上传文件",showLabel: false},rules: []})
          }
        })
        console.log(mainformData);
        detail.forEach((item)=>{
        let arr = []
          item.Fields.forEach((val)=>{
            if(val.dataTypeID===1&&val.componentID>0){
            // 下拉框
            arr.push({name:val.fieldName,type: "select",control:{modelValue:[],appendToBody: true},options:[{label: "label1",value: "value1"}],config:{type: "fixed",source: 0,request: "get",sourceFun: ""},item:{label:val.fieldDispName,showLabel: false},rules: []})
            }else if(val.dataTypeID===1&&val.componentID===0){
              // 文本框
              arr.push({name:val.fieldName,type:'input',control:{modelValue:''},config:{},item:{label:val.fieldDispName,showLable:'fasle'},rules:[],customRules:[]})
            }else if(val.dataTypeID===2){
              // 文本框。规则整数
              arr.push({name:val.fieldName,type:'input',control:{modelValue:''},config:{},item:{label:val.fieldDispName,showLable:'fasle'},rules:[],customRules:[{type: "int",message: "请输入正确的整数",trigger: "blur"}]})
            }else if(val.dataTypeID===3){
              // 文本框。规则小数
              arr.push({name:val.fieldName,type:'input',control:{modelValue:''},config:{},item:{label:val.fieldDispName,showLable:'fasle'},rules:[],customRules:[{type: "number",message: "请输入数字",trigger: "blur"}]})
            }else if(val.dataTypeID===4){
              // 日期
              arr.push({name:val.fieldName,type: "datePicker",control:{modelValue: "",type: "date"},config:{},item:{label: val.fieldDispName,showLabel: false},rules: []})
            }else if(val.dataTypeID===5){
              // 照片
              arr.push({name:val.fieldName,type: "upload",control: {modelValue: []},config: {btnText: "qwe"},item: {label: "上传图片",showLabel: false},rules: []})
            }else if(val.dataTypeID===10){
              // 文件
              arr.push({name:val.fieldName,type: "upload",control: {modelValue: []},config: {btnText: "qwe"},item: {label: "上传文件",showLabel: false},rules: []})
            }
          })
          mainformData.push({name: item.tableName,
            type: "table",
            list: arr,
            tableData: [],
            control: {
              border: true
            },
            config: {}
        })
        })
        state.formData.list=mainformData
      }
      const headToolClick = type => {
        state.sourceDialog = '' // 清空下防意外
        switch (type) {
          case 'import':
            console.log('有一件导入',props.data);
            if(props.data){
              let mainTable = []
              let detailTable = []
              props.data.forEach((item)=>{
                if(item.tableType==0){
                  mainTable.push(item)
                }else{
                  detailTable.push(item)
                }
              })
              conversion(mainTable,detailTable)
            }else{
              ElMessage({
                type: 'info',
                message: `未取到主表数据！`,
              })
            }
            break
          case 'del':
            state.formData.list = []
            state.formData.config.rulesComm = []
            store.commit('setActiveKey', '')
            store.commit('setControlAttr', {})
            break
          case 'eye':
            // 打开预览窗口
            state.previewVisible = true
            let stringPreview = objToStringify(state.formData) // 防止预览窗口数据修改影响
            const formName = state.formData.config.name
            const reg = new RegExp(`get${formName}ControlByName`, 'g')
            stringPreview = stringPreview.replace(reg, `getPreview${formName}ControlByName`)
            state.formDataPreview = stringToObj(stringPreview)
            state.formDataPreview.config.name = `Preview${formName}` // 修改下表单名
            break
          case 'json':
            // 生成脚本预览
            console.log(state.formData);
            dialogOpen(state.formData)
            break
          case 'save':
            saveData()
            break
          case 'vue':
            vueFileEl.value.open(state.formData)
            break
        }
      }
      // 弹窗确认
      const handleClose = () => {}
      const dialogConfirm = () => {
        // 生成脚本预览和导入json，都是将编辑器内容更新至state.formData
        try {
          const editVal = state.editor.getValue()
          let val = editVal
          if (state.editCodeType !== 'css') { // css类型时不需要处理
            val = stringToObj(editVal)
          }
          if (state.sourceDialog) {
            // 这里是编辑当前项的其它属性或校验
            state.sourceDialog(val)
          } else {
            state.formData = val
          }
          state.visibleDialog = false
        } catch (res) {
          // console.log(res.message)
          ElMessage.error(res.message)
        }
      }
      // 将数据保存在服务端
      const saveData = () => {
        const formData = objToStringify(state.formData)
        console.log(formData);
        // TemplateConfirm.value=true
        const dataType = state.searchDesign ? 'searchData' : 'formData'
        if (!formName) {
          // 不提交保存，条件不全 。暂存在session代设计筛选和表格时提供支持
          ctx.emit("supform",state.formData)
        } else {
          let prams = {
            formData: formData,
            id: query.id, // 修改时，当前记录id
            formName: state.formData.config.name, // 表单名称，用于在显示所有已创建的表单列表里显示
            dataTableName: formName // 表同上
          }
          if (state.searchDesign) {
            // 提交不同的字段
            prams = {
              searchData: formData,
              id: query.id
            }
          }
          state.loading = true
          saveDesignForm(prams)
            .then(res => {
              if (res.data.code === 200) {
                ElMessage({
                  message: '保存成功！',
                  type: 'success',
                })
                // todo 保存成功后应该要跳转页面
              } else {
                ElMessage.error(res.data.message)
              }
              state.loading = false
            })
            .catch(res => {
              localStorage(dataType, state.formData)
              ElMessage.info('请求异常，数据已暂存在localStorage')
              state.loading = false
            })
        }
        // 清空右侧栏信息
        // store.commit('setActiveKey', '')
        // store.commit('setControlAttr', {})
      }
      const dialogOpen = (obj, source, codeStyle) => {
        // 编辑属性和校验规则时从左边弹出
        state.drawerDirection = source ? 'ltr' : 'rtl'
        state.sourceDialog = source // 打开窗口来源回调
        state.visibleDialog = true
        state.editCodeType = codeStyle
        let editData = objToStringify(obj, true)
        if (codeStyle === 'css') {
          editData = obj
        }
        nextTick(() => {
          state.editor = aceEdit(editData, '', codeStyle)
        })
      }
      const drawerBeforeClose = done => {
        dialogCancel()
        done()
      }
      const dialogCancel = () => {
        state.visibleDialog = false
        state.sourceDialog = ''
      }
      // 预览窗口提交测试
      const previewForm = ref()
      const previewSubmit = () => {
        previewForm.value.validate((valid) => {
          if (valid) {
            // alert('校验通过')
            console.log(previewForm.value);
            ElMessage.success('校验通过')
          } else {
            // alert('校验不通过')
            ElMessage.error('校验不通过')
            return false
          }
        })
      }
      onUnmounted(() => {
        if (Object.keys(state.editor).length !== 0) {
          //state.editor.dispose()
          state.editor.destroy()
          state.editor.container.remove()
        }
      })
      return {
        ...toRefs(state),
        headToolClick,
        dialogConfirm,
        dialogOpen,
        drawerBeforeClose,
        dialogCancel,
        vueFileEl,
        handleClose,
        previewForm,
        previewSubmit,
        TemplateConfirm,
        conversion
      }
    }
  }
</script>
